import Vue from 'vue'
import VueRouter from 'vue-router'
// 官方提供的解决办法：
// 解决放行到别的页面会报错的提醒
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location, onResolve, onReject) {
  if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
  return originalPush.call(this, location).catch(err => err)
}
Vue.use(VueRouter)
// // 导入组件
// import login from '@/views/login'
// import layout from '@/layout'
// import home from '@/views/home'
// import ask from '@/views/ask'
// import video from '@/views/video'
// import mine from '@/views/mine'
// // 导入edit组件
// import edit from '@/views/mine/edit'
// // 导入details组件
// import details from '@/views/article'
// // 导入search组件
// import search from '@/views/search'
// import searchrs from '@/views/search/searchrs'
// // 导入chat组件
// import chat from '@/views/mine/chat'

//路由懒加载的方式导入组件即减少第一次打开页面的加载时间，用到那个页面就下载那个页面的js（看公司需求）
const login = () => import('@/views/login')
const layout = () => import('@/layout')
const home = () => import('@/views/home')
const ask = () => import('@/views/ask')
const video = () => import('@/views/video')
const mine = () => import('@/views/mine')
const edit = () => import('@/views/mine/edit')
const details = () => import('@/views/article')
const search = () => import('@/views/search')
const searchrs = () => import('@/views/search/searchrs')
const chat = () => import('@/views/mine/chat')

const routes = [
  // 添加路由重定向
  {
    path: '',
    redirect: '/layout/home'
  },
  {
    name: '/login',
    path: '/login',
    component: login
  },
  {
    name: '/layout',
    path: '/layout',
    component: layout,
    children: [{
        name: 'home',
        path: 'home',
        component: home,
        meta: {
          needKeep: true
        }
      },
      {
        name: 'ask',
        path: 'ask',
        component: ask
      },
      {
        name: 'video',
        path: 'video',
        component: video
      },
      {
        name: 'mine',
        path: 'mine',
        component: mine,
        meta: {
          needLogin: true
        }
      },
    ]
  },
  {
    name: 'edit',
    path: '/mine/edit',
    component: edit,
    meta: {
      needLogin: true
    }
  },
  {
    name: 'details',
    path: '/details',
    component: details
  },
  {
    name: 'search',
    path: '/search',
    component: search
  },
  {
    name: 'searchrs',
    path: '/search/searchrs',
    component: searchrs
  },
  {
    name: 'chat',
    path: '/mine/chat',
    component: chat,
    meta: {
      needLogin: true
    }
  }
]
// 路由对象
const router = new VueRouter({
  routes
})
// 路由器前卫：判断该页页面是否需要登录，需要就跳回登录页，不需要就直接放行
// 导入vuex对象
import store from '@/store'
// 导入请提示框
import {
  Toast
} from 'vant';
router.beforeEach((to, from, next) => {
  // 判断是否要等也的页面
  // 如何区分该页面是否要登录，使用到路由元信息，给需要登录的页面打个标签
  // 判断页面是否需要登录
  // 意思是：如果取得路由中的元信息里的meta有needLogin这个属性就是需要登录的页面
  if (to.meta.needLogin) {
    // 判断是否登录
    if (store.state.tokenObj.token) {
      // 如果已经登录了就
      next()

    } else {
      // 如果没有登录
      // 提示用户请先登录
      Toast.fail('请先登录');
      // 记录用户想要去的路由to.path里记录了用户想要去得页面路径
      // next得用法相当于$router.push，所以可以通过query传递参数
      next({
        name: '/login',
        query: {
          back: to.path
        }
      })
    }
  } else {
    // 不需要登录的路由则可以自由跳转
    next()
  }
})

export default router